<template>

  <el-footer class="footer" height="180px">

    <div class="footer">
     <el-row :gutter="24" style="padding-top: 30px;height: 80px;">
       <el-col :sm="8">
         <el-row :gutter="24" class="footer-title">
           <el-col :span="4" :offset="7">联系博主</el-col>
         </el-row>
         <el-row :gutter="24" class="footer-content">
           <el-col :sm="10" :offset="4">
             QQ：<i style="color: #00D1B2;">2460769651</i><br>
             邮箱：<i style="color: #00D1B2;">2460769651@qq.com</i>
           </el-col>
         </el-row>
       </el-col>



       <el-col :sm="6">
         <el-row :gutter="24" class="footer-title">
           <el-col :span="24">箴言</el-col>
         </el-row>
         <el-row :gutter="24" class="footer-content">
           <el-col :span="24" style="font-size: 15px;color: #00D1B2;">
             <i>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</i>
           </el-col>
         </el-row>
       </el-col>
       <el-col :sm="8">
         <el-row :gutter="24" class="footer-title">
           <el-col :span="24">网站已存活</el-col>
         </el-row>
         <el-row :gutter="24" class="footer-content">
           <el-col :span="24" style="font-size: 15px;color: #00D1B2;">
             <i id="htmer_time">青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</i>
           </el-col>
         </el-row>
       </el-col>
       <el-col :sm="2">
         <el-row :gutter="24" class="footer-title">
           <el-col :span="24">网站信息</el-col>
         </el-row>
         <el-row :gutter="24" class="footer-content">
           <el-col :span="24">
             总访问量: <i style="color: #00D1B2;">{{pv}}</i> <br>
             访客量: <i style="color: #00D1B2;">{{uv}}</i>
           </el-col>
         </el-row>
       </el-col>
     </el-row>
<el-divider ></el-divider>

    <div style="width: 100%;height: 1px;background-color: #F0F2F5;margin-top: 25px;"></div>

    <el-row :gutter="24" style="height: 70px;font-size: 16px;">
      <el-col :span="24" style="padding-top: 25px;">
        ICP备案号：<a href="https://beian.miit.gov.cn/" style="color: #F0F0F0;" target="_blank">鄂ICP备2021016918号</a>
      </el-col>
    </el-row>
    </div>
  </el-footer>

</template>

<script>
   import {getPVAndUV} from '@/api/article'
  export default {
    name: 'BaseFooter',
    created() {
      this.getPVAndUV()
      function secondToDate(second) {
        if (!second) {
          return 0;
        }
        var time = new Array(0, 0, 0, 0, 0);
        if (second >= 365 * 24 * 3600) {
          time[0] = parseInt(second / (365 * 24 * 3600));
          second %= 365 * 24 * 3600;
        }
        if (second >= 24 * 3600) {
          time[1] = parseInt(second / (24 * 3600));
          second %= 24 * 3600;
        }
        if (second >= 3600) {
          time[2] = parseInt(second / 3600);
          second %= 3600;
        }
        if (second >= 60) {
          time[3] = parseInt(second / 60);
          second %= 60;
        }
        if (second > 0) {
          time[4] = second;
        }
        return time;
      }
      function setTime() {
        //mouth要少一个月不然会出问题
        var create_time = Math.round(new Date(Date.UTC(2021,8,25, 15, 36, 0)).getTime() / 1000);
        var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
        var currentTime = secondToDate((  timestamp-create_time));
        var currentTimeHtml = currentTime[1] + '天'
          + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
          + '秒';
        if(document.getElementById("htmer_time")!=null)
          document.getElementById("htmer_time").innerHTML = currentTimeHtml;
      }
      //即时刷新
      setInterval(setTime, 1000);
    },
    data() {
      return {
        pv: 0,
        uv: 0,
      }
    },
    methods:{
        //获取pv和uv
       getPVAndUV() {
         getPVAndUV().then((data => {
           this.pv = data.data.pv
           this.uv=data.data.uv
         })).catch(error => {
           if (error !== 'error') {
             that.$message({type: 'error', message: '文章归档加载失败!', showClose: true})
           }
         })
       },

      // 监听,当路由发生变化的时候执行

    mounted() {

    }

    }

}
</script>

<style>
.footer {
  margin: 0 auto;
  text-align: center;
  min-height: 20px;
  max-width: 100%;
  padding: 0 15px;

}
  .el-footer {
    min-width: 100%;
    box-shadow: 0 -2px 3px hsla(0, 0%, 7%, .1), 0 0 0 1px hsla(0, 0%, 7%, .1);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1024;
    background-color: #333;
    color: #fff!important;
    opacity: .9;

  }
.footer-title {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 5px;
  color: white;
}

.footer-content {
  font-size: 8px;
  color: #F0F0F0;
}



</style>
